<template>
    <div>
        <div class="page-header">
            <Row>
                <Col span="2" offset="22">
                    <Button type="primary" class="lyx-mr10" @click="modal2 = true">分配账号</Button>
                </Col>
            </Row>
        </div>
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="tableSelectChange"></Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                    <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="totalNum" show-total />
                </Col>
            </Row>
        </div>
        <Modal v-model="modal1" title="详情" @on-ok="modal1 = false" @on-cancel="modal1 = false" width="60">
            <div class="detail">
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">专家姓名:</span>
                        <span>{{dataInfo.name}}</span>
                    </Col>
                    <Col span="10">
                        <span class="bold">联系电话:</span>
                        <span>{{dataInfo.mobile}}</span>
                    </Col>
                </Row>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">所属地区:</span>
                        <span>{{dataInfo.area}}</span>
                    </Col>
                    <Col span="12">
                        <span class="bold">账号:</span>
                        <span>{{dataInfo.company_code}}</span>
                    </Col>
                </Row>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="modal1 = false">确定</Button>
            </div>
        </Modal>
        <Modal v-model="modal2" title="分配账号" @on-ok="modal2 = false" @on-cancel="modal2 = false" width="60">
            <div class="detail">
                <Form :model="formItem" :label-width="200">
                    <FormItem label="专家姓名">
                        <Input v-model="formItem.name" placeholder="专家姓名" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="联系电话">
                        <Input v-model="formItem.mobile" placeholder="联系电话" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="所属地区">
                        <Input v-model="formItem.area" placeholder="所属地区" style="width: 60%"></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="ok(formItem)">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      totalNum: 4,
      dataInfo: {},
      formItem: {
        title: '',
        content: ''
      },
      columns4: [
        {
          title: '专家姓名',
          key: 'name'
        },
        {
          title: '所属地区',
          key: 'area'
        },
        {
          title: '登录账号',
          key: 'company_code'
        },
        {
          title: '操作',
          key: 'age',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.dataInfo = params.row
                    this.modal1 = true
                  }
                }
              }, '查看详情')
            ])
          }
        }
      ],
      data1: [
        {
          id: 11,
          name: '张明',
          mobile: '13987654565',
          area: '富民社区',
          company_code: 'L12345'
        },
        {
          name: '陈东',
          mobile: '13887655545',
          area: '铝镁社区',
          company_code: 'L12354'
        },
        {
          name: '肖平',
          mobile: '13943500000',
          area: '南塔社区',
          company_code: 'L18745'
        },
        {
          name: '李楠',
          mobile: '13976500000',
          organizations: 26,
          area: '山东庙社区',
          company_code: 'L14445'
        }
      ]
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    delSelect () {

    },
    ok () {
      this.formItem.company_code = 'L54345'
      console.log(this.formItem)
      if (!this.formItem.name) {
        alert('专家姓名不能为空')
        return
      }
      if (!this.formItem.mobile) {
        alert('联系电话不能为空')
        return
      }
      if (!this.formItem.area) {
        alert('所属地区不能为空')
        return
      }
      alert('分配成功成功')
      this.modal2 = false
      this.data1.push(this.formItem)
      this.totalNum = this.totalNum + 1
    }
  }
}
</script>

<style scoped>
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
